<template>
  <div id="recharge">
<!--    搜索信息栏 start-->
    <el-row class="search-box" :gutter="20">
      <el-col :span="10">
        <div class="grid-content">
          <el-input
            placeholder="请输入会员名称"
            v-model="vipName" @focus="vipNum=''">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content">
          <el-input
            placeholder="请输入会员账号"
            v-model="vipNum" @focus="vipName=''">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <el-button type="primary" icon="el-icon-search" @click="searchVip"></el-button>
        </div>
      </el-col>
    </el-row>
<!--    搜索信息栏 end-->
<!--    表格显示搜索内容 start-->
    <VIPSearchTable :vipInfoArr = "mylist.tableList" :flag="flag" @handleEdit="handleEdit"></VIPSearchTable>
    <Page v-if="flag"></Page>
<!--    表格显示搜索内容 end-->
    <el-dialog title="充值" :visible.sync="dialogFormVisible">
      <el-form :model="rechargeform">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="rechargeform.number" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="rechargeform.name" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth" >
          <el-input v-model="rechargeform.money" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="充值金额" :label-width="formLabelWidth" >
          <el-input v-model="rechargeform.rechargeMoney" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDia">取 消</el-button>
        <el-button type="primary" @click="rechargeMoney">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import VIPSearchTable from '../../components/front/cf/VIPSearchTable';
  import { mapActions, mapMutations,mapGetters  } from 'vuex'
  import Page from '../../components/common/Page'
  export default {
    name: "Recharge",
    components:{
      VIPSearchTable,
      Page
    },
    data(){
      return {
        dialogFormVisible: false,
        vipName: '',
        vipNum:'',
        vipInfoArr: [],
        flag: false,
        rechargeform: {
          number: '',
          name: '',
          money: 0,
          rechargeMoney: 0
        },
        formLabelWidth: '120px'
      }
    },
    computed: {
      ...mapGetters(['mylist'])
    },
    methods: {
      ...mapMutations(['setPageLenght']),
      ...mapActions('vipinfo/',['searchVipAC','rechargeAC']),
      ...mapActions(['getTable','changePage']),
      searchVip(){
        if ((!this.vipName)&&(!this.vipNum)){
          //没有输入查询条件
          this.flag = !!this.vipName
        } else  {
          this.flag = true
        }
        let obj = {
          name: this.vipName !== ''? this.vipName: 'null',
          userMember: {
            number: this.vipNum !== ''? this.vipNum: 'null'
          }
        }
      this.searchVipAC(obj).then(res =>{
        console.log(res)
        this.setPageLenght(3)
        this.getTable(res.userList)
        this.changePage(1)
        // this.vipInfoArr = res.userList
      })
      },
      handleEdit(index,row) {
        this.dialogFormVisible = true
        this.rechargeform.name = row.name
        this.rechargeform.number = row.userMember.number
        this.rechargeform.money = parseInt(row.userMember.score)
      },
      closeDia(){
        this.dialogFormVisible = false
        this.rechargeform.rechargeMoney = ''
      },
      rechargeMoney(){
        let obj = {
          number: this.rechargeform.number,
          money: parseInt(this.rechargeform.rechargeMoney)
        }
        this.rechargeAC(obj).then(res => {
          this.$message.success('充值成功!当前余额为:'+(parseInt(this.rechargeform.money)+obj.money))
          this.closeDia()
        })
      }
    },
    created() {
      this.setPageLenght(3)
      this.getTable([])
      this.changePage(1)
      if (this.$router.currentRoute.query.userId !== undefined) {
        this.vipNum = this.$router.currentRoute.query.userId
        let obj = {
          name: 'null',
          userMember: {
            number: this.vipNum
          }
        }
        this.searchVipAC(obj).then(res =>{
          this.setPageLenght(3)
          this.getTable(res)
          this.changePage(1)
          this.vipInfoArr = res.userList
        })
      }
    }
  }
</script>

<style lang="less" scoped>
#recharge {
  .search-box {
    margin: 20px 0;
  }
}
</style>
